<template>
	<view>
		<view>
			<view
				class="page_top2"
				:style="{
					'background': topNav ? 'white' : 'transparent',
					'z-index': 199,
				}"
			>
				<top-status></top-status>
				<view class="tabsBack">
					<view @click="goBack()" class="blackbox">
						<uni-icons :color="topNav ? '#000000' : '#ffffff'" type="left" size="30"></uni-icons>
					</view>
					<view class="topTitle hiddenText" v-show="topNav"></view>
				</view>
			</view>
		</view>
		<view class="pageBG">
			<image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1721805761670140.png" mode="widthFix" />
		</view>
		<view class="load" v-if="!load">
			<u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
		</view>
		<view v-else>
			<view class="centerBox">
				<view class="topPic">
					<image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1721805783378101.png" mode="widthFix" />
				</view>
				<view class="contentBox">
					<view class="infoBox">
						<view class="videoBox">
							<video :src="farInfo.GX_Video"></video>
						</view>
						<view class="infoDesc">
							<view class="infoTitle">
								<text style="opacity: 0">商户地址</text>
								<view class="colorBox"></view>
								<view class="iftText">农户地址</view>
							</view>
							<view class="infoText">
								{{ farInfo.Address || '暂无地址' }}
							</view>
							<view class="infoTitle">
								<text style="opacity: 0">商户简介</text>
								<view class="colorBox"></view>
								<view class="iftText">商户简介</view>
							</view>
							<view class="infoText">
								{{ farInfo.Description || '暂无简介' }}
							</view>
						</view>
						<view class="infoBtnBox">
							<view class="ibtn btnShare">
								<button lines="1" class="text_9" hover-class="none" open-type="share">分享好友</button>
							</view>
							<view class="ibtn btnGobuy" @click="goShop()">我要助力</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import topStatus from '@/components/topStatus/topStatus.vue';
export default {
	components: {
		topStatus,
	},
	data() {
		return {
			shopId: null, //商品id
			farmerId: null, //农户id
			farInfo: {},
			topNav: false,
			load: true,
		};
	},
	computed: {},
	async onShow() {},
	async onLoad(e) {
		this.shopId = e.shopId;
		this.farmerId = e.farmerId;
		await this.getDetail(e.farmerId);
	},
	onPageScroll(e) {
		//nvue暂不支持滚动监听，可用bindingx代替
		if (e.scrollTop > this.lastScrollTop) {
			// 向下滚动
			if (e.scrollTop >= 100) {
				this.topNav = true; // 你的逻辑
			}
			this.IsOpenBg = false; // 滚动条向上滚时执行的逻辑
		} else {
			// 向上滚动
			if (e.scrollTop < 100) {
				this.topNav = false; // 你的逻辑
			}
		}
		this.lastScrollTop = e.scrollTop <= 0 ? 0 : e.scrollTop;
	},
	// 分享好友
	onShareAppMessage(res) {
		//发送给朋友
		let pid = this.user.UserID;
		let shopId = this.shopId;
		return {
			title: '分享了一位农户',
			path: '/pages/shop/farmer?pid=' + pid + '&id=' + shopId,
		};
	},
	//分享朋友圈
	onShareTimeline() {},
	methods: {
		async getDetail(id = 0) {
			let shopid = id == 0 ? this.farmerId : id;
			let res = await this.$api.post('/Shop/Detail', {
				ID: shopid,
			});
			console.log(res, '==================res');
			if (res.code == 0) {
				this.farInfo = res.data;
				console.log(this.farInfo.GX_Video);
			}
		},
		//返回上一页
		goBack() {
			const pages = getCurrentPages();
			if (pages.length > 1) {
				// 如果页面栈长度大于1，则说明有上一页，可以返回
				uni.navigateBack();
			} else {
				// 如果没有上一页，则导航到首页
				uni.reLaunch({
					url: '/pages/tab/home',
				});
			}
		},
		goShop() {
			const pages = getCurrentPages();
			if (pages.length > 1) {
				// 如果页面栈长度大于1，则说明有上一页，可以返回
				uni.navigateBack();
			} else {
				// 如果没有跳该商品详情页
				uni.redirectTo({
					url: `/pages/shop/detail?id=${this.shopId}`,
				});
			}
		},
	},
};
</script>

<style lang="scss">
button{padding: 0;margin: 0; border: 1px solid transparent;}
button::after{ border: none; }
.button-hover {
    color:transparent;
    background-color:transparent;
}
page {
	// background: #fefefe;
	background: linear-gradient(180deg, #ffb70a 0%, #fe4001 100%);
	position: relative;
}

.pageBG {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: -1;

	> image {
		width: 100%;
		display: block;
	}
}

.page_top2 {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	box-sizing: border-box;
	transition: 0.3s all;
	z-index: -1;

	.tabsBack {
		height: 44px;
		padding-left: 32rpx;
		display: flex;
		align-items: center;
		z-index: 999;

		.topTitle {
			padding-left: 20rpx;
			font-weight: bold;
			font-size: 36rpx;
			color: #333333;
			width: 300rpx;
		}

		.blackbox {
			width: 52rpx;
			height: 52rpx;
			display: flex;
			align-items: center;
		}

		image {
			width: 24rpx;
			height: 36rpx;
			display: block;
		}
	}
}

.centerBox {
	width: 100%;
	padding-top: 120rpx;
	.topPic {
		width: 670rpx;
		margin: 0 auto;
	}

	.contentBox {
		width: 100%;
		padding: 14rpx 40rpx;

		.infoBox {
			background: #ffffff;
			border-radius: 24rpx;
			padding: 34rpx;

			.videoBox {
				width: 100%;
				height: 400rpx;
				border-radius: 16rpx;
				overflow: hidden;

				> video {
					width: 100%;
					height: 100%;
				}
			}

			.infoDesc {
				width: 100%;
				margin-top: 32rpx;

				.infoTitle {
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
					position: relative;
					margin-bottom: 30rpx;
					width: fit-content;

					.colorBox {
						position: absolute;
						left: 0;
						bottom: 0rpx;
						width: 100%;
						height: 10rpx;
						background: #ffba92;
						border-radius: 5rpx;
						z-index: 9;
					}

					.iftText {
						position: absolute;
						width: 100%;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						font-weight: bold;
						font-size: 32rpx;
						color: #333333;
						z-index: 12;
					}
				}

				.infoText {
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					margin-bottom: 40rpx;
				}
			}

			.infoBtnBox {
				width: 100%;
				display: flex;
				justify-content: space-around;
				align-items: center;

				.ibtn {
					width: 272rpx;
					height: 88rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-weight: 500;
					font-size: 32rpx;

					border-radius: 44rpx;
				}

				.btnShare {
					border: 2rpx solid #5d8bf8;
					color: #5d8bf8;

					> button {
						width: 100%;
						height: 100%;
						background: transparent;
						border: none;
						color: #5d8bf8;
						border-radius: 44rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 32rpx;
					}
				}

				.btnGobuy {
					color: #ffffff;
					border: 2rpx solid transparent;
					background: linear-gradient(102deg, #ff9d26 0%, #fe4e01 100%);
				}
			}
		}
	}
}
</style>
